import React from 'react'
import { Modal, Button, Form, Input, Radio } from 'antd'
import { LwjArea }  from 'components';
import { debug } from 'util';

const FormItem = Form.Item
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const DistributorForm = ({
  onOk, item, distributorType, form: {
    getFieldDecorator,
    validateFields,
    getFieldValue
  }, ...modalProps
}) => {
  const formItemLayout = {
    labelCol: {
      xs: { span: 8, offset: 0 },
      sm: { span: 8, offset: 0 },
    },
    wrapperCol: {
      xs: { span: 12, offset: 0 },
      sm: { span: 12, offset: 0 },
    },
  }

  const onSubmit = (e) => {
    e.preventDefault()
    validateFields((err, values) => {
      if (!err) {
        values.creditLine = 0;
        const region = values.region;
        let city;
        let province;
        let district;
        if (_.isArray(region)) {
          region.forEach((value, key) => {
            if (key === 0)
              province = value
            if (key === 1)
              city = value
            if (key === 2)
              district = value
          })
        }
        values.city = city;
        values.province = province;
        values.district = district;
        delete values.region;
        onOk(values)
      }
    })
  }

  const modalOpts = {
    ...modalProps,
    onOk: onSubmit,
  }
  const buildRegion = (item) => {
    const city = item.city
    const province = item.province
    const district = item.district
    return [province, city, district]
  }

  console.info(distributorType)
  /** @namespace item.name 账户名称*/
  /** @namespace item.financialAccountBankName 开户银行*/
  /** @namespace item.financialAccountBranch 支行*/
  /** @namespace item.bankAccount 开户账号*/
  /** @namespace item.financialAccountBankUserName 开户名*/
  /** @namespace item.creditLine */
  /** @namespace item.paymentRatio */
  return (
    <Modal {...modalOpts}>
      <Form layout="horizontal">
        <FormItem {...formItemLayout} hasFeedback label="户名">
          {getFieldDecorator('name', {
            // rules: [{required: true, message: '户名必须填写!'}],
            initialValue: item.name,
          })(<Input />)}
        </FormItem>

        <FormItem {...formItemLayout} hasFeedback label="开户银行">
          {getFieldDecorator('bankName', {
            // rules: [{required: true, message: '开户银行必须填写!'}],
            initialValue: item.financialAccountBankName,
          })(<Input />)}
        </FormItem>

        <FormItem {...formItemLayout} hasFeedback label="支行">
          {getFieldDecorator('branch', {
            // rules: [{required: true, message: '支行必须填写!'}],
            initialValue: item.financialAccountBranch,
          })(<Input />)}
        </FormItem>

        <FormItem {...formItemLayout} hasFeedback label="开户账号">
          {getFieldDecorator('bankAccount', {
            // rules: [{required: true, message: '开户账号必须填写!'}],
            initialValue: item.bankAccount,
          })(<Input />)}
        </FormItem>

        <FormItem {...formItemLayout} hasFeedback label="开户名">
          {getFieldDecorator('bankUserName', {
            // rules: [{required: true, message: '开户名必须填写!'}],
            initialValue: item.financialAccountBankUserName,
          })(<Input />)}
        </FormItem>

        {/* <FormItem {...formItemLayout} hasFeedback label="信贷额度">
          {getFieldDecorator('creditLine', {
            rules: [{required: true, message: '信贷额度必须填写!'}, {type: 'integer'}],
            initialValue: item.creditLine || 0,
          })(<Input/>)}
        </FormItem> */}

        <FormItem {...formItemLayout} hasFeedback label="付款比例">
          {getFieldDecorator('paymentRatio', {
            validateTrigger: 'onBlur',
            rules: [{ required: true, message: '付款比例必须填写!' }, {
              validator: (rule, value, callback) => {
                value = Number(value)

                if (value > 100) {
                  callback('付款比例不能大于100%')
                } else if (value < 60) {
                  callback('付款比例不能小于60%')
                }
                callback()
              }
            }],
            initialValue: item.paymentRatio || 100,
          })(<Input />)}
        </FormItem>

        {/* <FormItem {...formItemLayout} hasFeedback label="门店签约人">
          {getFieldDecorator('distributorSigner', {
            rules: [
              {required: true, message: '门店签约人必须填写!'},
              {type: 'email', message: '必须填写有效的Email!'}
            ],
            initialValue: item.distributorSigner,
          })(<Input/>)}
        </FormItem> */}

        <FormItem {...formItemLayout} hasFeedback label="门店运营">
          {getFieldDecorator('distributorOperator', {
            rules: [
              { required: true, message: '门店运营必须填写!' },
              { type: 'email', message: '必须填写有效的Email!' }
            ],
            initialValue: item.distributorOperator,
          })(<Input />)}
        </FormItem>

        <FormItem {...formItemLayout} label="门店地址">
          {getFieldDecorator('region', {
            rules: [
              {
                // required: true,
                // message: '请输入门店地址',
                type: 'array'
              }
            ],
            initialValue: !_.isEmpty(item) && buildRegion(item)
          })(
            < LwjArea width={'100%'} />
          )}
        </FormItem>
        <FormItem {...formItemLayout} hasFeedback label="详细地址">
          {getFieldDecorator('address', {
            // rules: [{required: true, message: '门店地址必须填写!'}],
            initialValue: item.address,
          })(<Input />)}
        </FormItem>
        <FormItem {...formItemLayout} style={{ marginBottom: 0 }} label="门店编码">
          {getFieldDecorator('code', {
            rules: [{ required: true, message: '编码必须填写!' }, { pattern: '^[A-Z]{5}[0-9]{2}$', message: '编码必须是5位大写字母+2位数字' }],
            initialValue: item.code,
          })(<Input disabled={distributorType === 'update'} placeholder='5位大写字母+2位数字' />)}
          {(<p style={{ width: 200, marginBottom: 0 }}>注：此编码将作为合同号前7位</p>)}
        </FormItem>
        <FormItem {...formItemLayout} style={{ marginBottom: 0 }} label="开启分销市场">
          {getFieldDecorator('marketStatus', {
            rules: [{ required: true, message: '请选择是否开启分销市场!' }],
            initialValue: item.marketStatus ? 'true' : 'false',
          })(
            <RadioGroup>
              <Radio value="true">是</Radio>
              <Radio value="false">否</Radio>
            </RadioGroup>
          )}
        </FormItem>
        {distributorType === "update" && <FormItem {...formItemLayout} style={{ marginBottom: 0 }} label="是否允许提现">
          {getFieldDecorator('transferToBalanceStatus', {
            rules: [{ required: true, message: '请选择是否允许提现!' }],
            initialValue: item.transferToBalanceStatus ? 'true' : 'false',
          })(
            <RadioGroup>
              <Radio value="true">是</Radio>
              <Radio value="false">否</Radio>
            </RadioGroup>
          )}
        </FormItem>}

        <FormItem {...formItemLayout}>
          {getFieldDecorator('version', {
            initialValue: item.version || 0,
          })(<Input type='hidden' />)}
        </FormItem>

      </Form>
    </Modal>
  )
}

export default Form.create()(DistributorForm)
